<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师界面</title>
    <script src="../js/vue.min.js"></script>
    <link rel="stylesheet" href="../elementUI/index.css">
    <script src="../elementUI/index.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <!-- <link rel="stylesheet" href="../css/sms.css"> -->
    <script src="../js/alldatas.js"></script>
    <script src="../js/axios.min.js"></script>
    <style>
        body {
            background: url(../img/3.jpg);
            margin: 0;
        }

        .ap {
            width: 1600px;
            height: 700px;
            background: rgb(204, 199, 210, 0.3);
            border: solid 2px;
            margin: 0px 158px;
        }

        h2 {
            width: 1915px;
            font-size: 50px;
            text-align: center;
            color: aliceblue;
        }

        #tb {
            position: relative;
            top: 80px;
            left: 150px
        }

        .block {
            position: relative;
            top: 80px;
            left: 150px
        }

    </style>
</head>

<body>
<h2>教师管理界面</h2>
<div id="app" class="ap">
    <el-table :data="message" stripe style="width: 1300px" id="tb" v-loading="loading" element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 1)">
        <el-table-column prop="sid" label="学号" width="400">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="400">
        </el-table-column>
        <el-table-column prop="score" label="成绩" width="400">
        </el-table-column>
        <el-table-column label="操作" width="100">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit-outline" circle @click="show(scope.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog id="update" :visible.sync="visible" width="30%" title="编辑学生信息">
        姓名：
        <el-input type="text" v-model="info.name" style="width:450px" :disabled="true"></el-input>
        <br>
        <br>
        成绩：
        <el-input type="text" v-model="info.score" style="width:450px"></el-input>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="update(info.sid,info.score)">修 改</el-button>
        </span>
    </el-dialog>

    <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="count" style="width: 100%;">
        </el-pagination>

        <el-button type="primary" @click="openDialog">随机点名</el-button>
        <el-button type="primary" @click=visible2=true>修改密码</el-button>
    </div>

    <el-dialog id="random" :visible.sync="visible1" width="30%" title="随机点名">
        <h3 v-model="luckyPerson">本次幸运儿：{{luckyPerson}}</h3>
    </el-dialog>

    <el-dialog id="updatePassword" :visible.sync="visible2" width="30%" title="修改密码">
        <el-input type="password" placeholder="请输入新密码" v-model="info.password" style="width:450px"></el-input>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible2 = false">取 消</el-button>
            <el-button type="primary" @click="updatePassword(info.password)">修 改</el-button>
        </span>
    </el-dialog>
</div>
</body>
<script>
    var v1 = new Vue({
        el: "#app",
        data: {
            loading: true,
            visible: false,
            visible1: false,
            visible2: false,
            message: [],
            info: {},
            luckyPerson: "",
            count: 100,
            currentPage: 1,
            pageSize: 10
        },
        methods: {
            handleSizeChange(e) {
                this.currentPage = 1;
                this.pageSize = e;
                axios({
                    method: 'get',
                    url: '/teacher',
                    params: {currentPage: this.currentPage, pageSize: this.pageSize},
                    responseType: 'json'
                }).then(response => {
                    let res = response.data;
                    //console.log(res);
                    v1.tableData = res.data;
                    v1.count = res.count;

                    v1.loading = false
                }).catch(err => {
                    console.log(err);
                });
            },
            handleCurrentChange(e) {
                this.currentPage = e;

                console.log("当前页码：" + this.currentPage)
                console.log("当前分页数：" + this.pageSize)
                axios({
                    method: 'get',
                    url: '/teacher',
                    params: {currentPage: this.currentPage, pageSize: this.pageSize},
                    responseType: 'json'
                }).then(response => {
                    let res = response.data;
                    v1.tableData = res.data;
                    v1.count = res.count;
                    v1.loading = false
                }).catch(err => {
                    console.log(err);
                });
            },
            show(row) {
                this.visible = true;
                //console.log(row)
                //this.info = row;
                this.info = JSON.parse(JSON.stringify(row));
                console.log(this.info);
            },
            update(sid, score) {
                console.log(sid, score)
                axios({
                    method: "post",
                    url: "/teacher",
                    params: {sid, score},
                    responseType: 'json'
                }).then(() => {
                    this.$message.success("修改成功");
                    v1.loading = true
                    setTimeout(() => {
                        v1.loading = false
                    }, 500)
                    axios({
                        method: "get",
                        url: "/teacher",
                        params: {currentPage: 1, pageSize: 10},
                        responseType: 'json'
                    }).then(response => {
                        let res = response.data;
                        //console.log(res);
                        v1.message = res.data;
                        v1.count = res.count;
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(err => {
                    console.log(err)
                });
                this.visible = false;
            },
            openDialog() {
                this.visible1 = true;
                this.randomName();
            },
            randomName() {
                axios({
                    method: "get",
                    url: "/teacher2",
                    responseType: 'json'
                }).then(response => {
                    let res = response.data;
                    /*console.log(res);
                    console.log(res.data);*/
                    v1.luckyPerson = res.data.name;
                }).catch(err => {
                    console.log(err)
                })
            },
            updatePassword(password) {
                console.log(password);
                axios({
                    method: "post",
                    url: "/teacher2",
                    params: {password},
                    responseType: 'json'
                }).then(() => {
                    this.$message.success("修改成功");
                    v1.visible2 = false;
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    });

    axios({
        method: "get",
        url: "/teacher",
        params: {currentPage: 1, pageSize: 10},
        responseType: 'json'
    }).then(response => {
        v1.loading = false
        let res = response.data;
        //console.log(res);
        v1.message = res.data;
        v1.count = res.count;
    }).catch(err => {
        console.log(err)
    })
</script>

</html>